<!---->
<script>


import { slideAdd, slideDel, slideEdit, slideView} from '@/api/system/api'
import {getToken} from '@/utils/auth'

export default ({
  data() {
    return {
      dialogImageUrl: '',
      headerObj: {
        Authorization: getToken()
      },
      show: '',
      edits: {
        id: '',
        picture: '',
      },
      ids: {
        ids: ''
      },
      flag: '',
      options: {
        id: '383460642578894848',
        title: '加送蚕丝'
      },
      radio: '1',
      dialogVisible: false,
      value: true,
      tableData: [],
      addPicture: '',
      img:''
    }
  },
  created() {


    // 数据列表渲染
    slideView({pageSize: 1000}).then(res => {

      this.tableData = res.rows.filter(item => {

        item.status = false
        return item
      })

    })
  },
  // 网址拿去
  methods: {
    handlePictureCardPreview(file) {
      // 照片赋值

      this.img = file.fileName
      // this.edits.picture = file.fileName
      // this.addPicture = file;
      // this.dialogImageUrl = file.url;
      // this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },

    add() {
      this.show = true
      this.dialogVisible = true

    },
    //添加 确定
    save() {
      this.show = true
      this.dialogVisible = false
      slideAdd({
        enable: 1,
        operationId: this.options.id,
        operationType: 1,
        picture: this.img,
        url: ''
      }).then(res => {

        slideView({pageSize: 1000}).then(res => {

          this.tableData = res.rows
          this.$modal.msgSuccess('操作成功')
        })
      })
    },
    //删除轮播图
    del(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除个案咨询档案编号为"' + ids + '"的数据项？').then(function () {

        return slideDel({
          ids: ids
        }).then(res => {

        })
      }).then(() => {
        this.$modal.msgSuccess('删除成功')
        slideView({pageSize: 1000}).then(res => {

          this.tableData = res.rows
        })
      }).catch(() => {
      })
    },
    //编辑
    edit(row) {
      this.show = false
      this.dialogVisible = true
      this.edits = JSON.parse(JSON.stringify(row))

    },
    //修改
    determine() {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      this.show = true
      this.dialogVisible = false
      slideEdit({
        id:this.edits.id,
        picture: this.edits.picture
      }).then(res => {
        slideView({pageSize: 1000}).then(res => {

          this.tableData = res.rows.filter(item => {

            item.status = false
            return item
          })

        })

      })
    }
  }
})
</script>

<template>
  <div>
    <el-button class="addbtn" type="primary" @click="add">添加</el-button>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          label="序号"
          prop="this.tableData.index"
          type="index"
        >
        </el-table-column>
        <el-table-column
          align="center"

          label="图片"
        >
          <template slot-scope="scope">
            <div style="width: 200px;height: 80px;border: 1px solid #aaa"><img
              :src="'http://192.168.5.120:8090' + scope.row.picture" style="width: 203px;height: 103px"></div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"

          label="方式"
        >
          内链
        </el-table-column>
        <el-table-column
          align="center"
          label="状态"

        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enable"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          prop="date"
        >
          <template slot-scope="scope">
            <a style="color: #00afff" @click="edit(scope.row)">编辑</a>
            <a style="margin-left: 15%;color: #00afff" @click="del(scope.row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :before-close="handleClose"
      :visible.sync="dialogVisible"
      title="提示"
      width="40%"
    >

      <!--    上传头像  action='/stage-api' -->
      <div class="contentify">
        <span style="display: inline-block;margin-top: -10px"> 封面图片</span>
        <el-upload
          :headers="headerObj"
          action="http://192.168.5.120:8090/common/upload"
          :on-success="handlePictureCardPreview"
          list-type="picture-card"
          :limit="1"
          style="display: inline-block">
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
      <div class="contentify">
        <el-radio v-model="radio" label="1">内链</el-radio>
      </div>

      <div class="contentify">
        选择跳转文章
        <el-select
          v-model="edits.title"
          placeholder="请选择"
          value-key="id"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.title"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button v-show="show" type="primary" @click="save">确 定</el-button>
        <el-button v-show="!show" type="primary" @click="determine">保存</el-button>
  </span>
    </el-dialog>


  </div>

</template>

<style lang="scss" scoped>
.addbtn {
  margin-top: 2%;
  margin-left: 2%;
}

.el-table tr {
  height: 200px !important;
}

.avatar-uploader {
  display: inline-block;
}

.avatar-uploader .el-upload {
  display: inline-block;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  border: 1px solid #aaa;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.contentify {
  margin-top: 3%;
  margin-left: 3%;
}


</style>
